<!-- 首页 -->
<template>
  <div class="main-container bg-white p-4">
    <SearchGroup
      :label-option="Data.labelOption"
      @handleSearch="loadData"
      @handleReset="loadData"
      v-model:searchOption="Data.filterOption"
    >
    </SearchGroup>
    <div ref="myTEcharts" class="w-full h-[calc(100%-100px)] bg-[#2C343C]"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, reactive, ref, onUnmounted, watch } from 'vue'
import { getKmSimpAlleList, getHasTeachee } from '/@/api/organization/subjectManage'
import { selectKmpyjdOption } from '/@/views/home/index/index'
import { getAcountmdm, getpyMonitorChart } from '/@/api/examinationAudit'
import { getPySzListByKmdm } from '/@/api/teacher'

const myTEcharts = ref<any>()
const kmdmOption = ref<any[]>([])
const stOption = ref<any[]>([])
const jsOption = ref<any[]>([])

const Data = reactive({
  filterOption: {
    kmdm: undefined, //科目代码
    zpDataFlag: undefined, //正评数据标志
    stId: undefined, //试题id
    accountList: [], //指定账号（可选）
  },
  option: {
    title: {
      text: '',
      textStyle: {
        color: '#fff',
      },
    },
    toolbox: {},
    tooltip: {
      trigger: 'axis',
      alwaysShowContent: false /**一直显示提示框 */,
      axisPointer: {
        type: 'shadow',
      },
      formatter(params) {
        let str = ` <div style="
        display: flex;
        padding-left: 15px;
        position: relative;
        justify-content: space-between;
        min-width: 150px;
      "
    >
      <span>评阅教师</span>
      <span>评阅分数</span>
    </div>`
        for (let i = 0; i < params.length; i++) {
          const element = params[i]
          str += ` <div
      style="
        display: flex;
        padding-left: 15px;
        position: relative;
        justify-content: space-between;
        min-width: 150px;
      "
    >
      <span
        style="
          position: absolute;
          width: 10px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 10px;
          display: inline-block;
          background: ${element.color};
          border-radius: 50%;
        "
      ></span>
      <span>${element.seriesName}</span>
      <span>${element.value}</span>
    </div>`
        }
        return `<div>
          第${params[0].name}次评阅
        </div>
        ${str}
        `
      },
    },
    grid: {
      left: '2%',
      right: '1.5%',
      bottom: '8%',
      top: '10%',
      containLabel: true,
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        moveHandleSize: 7,
        end: 60,
      },
      {
        type: 'inside',
        xAxisIndex: [0],
        show: true,
        start: 0,
        end: 35,
      },
    ],
    xAxis: {
      data: Array.from({ length: 50 }, (_, i) => i + 1),
      silent: false,
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        onZero: true,
      },
      axisLabel: {
        show: true,
        interval: 0,
        fontSize: 12,
      },
      axisTick: {
        show: true,
      },
      name: '记录',
      nameLocation: 'end',
      nameGap: 5,
    },
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#535353',
          },
        },
        minInterval: 1,
        name: '分数',
        max(num) {
          return num.max
          return isNaN(num.max) ? 5 : num.max + 5 - (num.max % 5)
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      // {
      //   name: '教师一',
      //   type: 'line',
      //   data: [0, 0, 0, 0, 0, 0, 0, 7, 14, 89, 3, 7, 3, 3, 8, 8, 8, 14, 23, 56, 78, 90],
      //   large: true,
      //   smooth: true,
      // },
    ],
    backgroundColor: '#2c343c',
    legend: {
      left: 'center',
      top: '3%',
      textStyle: {
        color: '#fff',
      },
    },
  },
  labelOption: [
    {
      name: '评阅阶段',
      key: 'zpDataFlag',
      labelWidth: 80,
      selectOption: selectKmpyjdOption,
      type: 'Radio',
      inputWidth: 180,
      isNotReset: true,
    },
    {
      labelWidth: 50,
      key: 'kmdm',
      type: 'Select',
      name: '科目',
      selectOption: kmdmOption,
      fieldNames: { label: 'kmmc', value: 'kmdm' },
    },
    {
      labelWidth: 50,
      key: 'stId',
      type: 'Select',
      name: '试题',
      selectOption: stOption,
      fieldNames: { label: 'tmbt', value: 'stId' },
    },
    {
      labelWidth: 80,
      key: 'accountList',
      type: 'Select',
      name: '评阅教师',
      mode: 'multiple',
      inputWidth: 600,
      selectOption: jsOption,
    },
  ],
} as any)

async function getKmpyJd(kmdm) {
  if (!kmdm || kmdm === '0') return
  const { code, data } = await getAcountmdm({ kmdm })
  if (code == 200) {
    !Data.filterOption['zpDataFlag'] &&
      (Data.filterOption['zpDataFlag'] = data.kmpyjd === 'FORMAL' ? 'true' : 'false')
  }
}

watch(
  () => [Data.filterOption.kmdm, Data.filterOption.zpDataFlag],
  ([valKmdm, valZpFlag], [oldKmdm, oldZpFlag]) => {
    Data.filterOption.stId = null
    stOption.value = []
    if (valKmdm && valKmdm != '0' && valZpFlag && (oldKmdm != valKmdm || oldZpFlag != valZpFlag)) {
      getKmStList()
    }

    if (valKmdm && valKmdm != '0' && oldKmdm != valKmdm) {
      Data.filterOption.accountList = []
      getHasJsAcount()
    }
  }
)

async function loadData() {
  Data.option.series = []
  chartDivInit.clear()
  chartDivInit?.setOption(Data.option)
  if (!Data.filterOption['zpDataFlag']) {
    await getKmpyJd(Data.filterOption.kmdm)
  } else if (Data.filterOption.kmdm && Data.filterOption.kmdm != '0') {
    if (Data.filterOption['stId']) {
      getJsMonitorChart()
    }
  }
}

async function getKmList() {
  let { code, data } = await getKmSimpAlleList({
    pageSize: 0,
  })
  if (code == 200) {
    data.forEach(item => (item.kmmc = `${item.kmdm}(${item.kmmc})`))
    kmdmOption.value = data.sort((a, b) => a.kmdm - b.kmdm) || []
  }
}

async function getHasJsAcount() {
  let { code, data } = await getHasTeachee({
    pageSize: 0,
    kmdm: Data.filterOption.kmdm,
  })
  if (code == 200) {
    jsOption.value = []
    for (let key in data) {
      jsOption.value.push({ value: key, label: `(${data[key]})${key}` })
    }
  }
}

async function getKmStList() {
  let { code, data } = await getPySzListByKmdm({
    pageSize: 0,
    kmdm: Data.filterOption.kmdm,
    zpDataFlag: Data.filterOption['zpDataFlag'],
  })
  if (code == 200) {
    data.forEach(item => (item.tmbt = `${item.tmbh}${item.tmbt || item.tmlx}`))
    stOption.value = data || []
  }
}

async function getJsMonitorChart() {
  chartDivInit.clear()
  await getpyMonitorChart(Data.filterOption).then(({ code, data }) => {
    if (code == 200) {
      Data.option.xAxis.data = data.xlist || []
      // data.xlist?.length > 50
      //   ? data.xlist
      //   : Array.from({ length: 50 }, (_, i) => {
      //       return data.xlist?.length && data.xlist?.length > i ? data.xlist[i] : i + 1
      //     })
      Data.option.dataZoom[0].end = Data.option.dataZoom[1].end =
        Data.option.xAxis.data?.length < 30 ? 100 : 3000 / Data.option.xAxis.data?.length
      for (let key in data.ymap || {}) {
        Data.option.series.push({
          name: key,
          type: 'line',
          data: data.ymap[key],
          large: true,
          smooth: true,
        })
      }
    }
  })
  chartDivInit?.setOption(Data.option)
}

let chartDivInit: any = {}

function resizeChart() {
  chartDivInit?.resize()
}

onMounted(async () => {
  chartDivInit = echarts.init(myTEcharts.value)
  chartDivInit?.setOption(Data.option)
  getKmList()
  window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart)
})
</script>

<style lang="less" scoped>
.main-container {
  height: calc(@c_height + 32px);
}
</style>
